Twice profit than before you ever got in business
Join our award winning teams thats enjoy
HTML Structure - top
Upturn - SEO & Digital Marketing Agency Html Template is built with the Bootstrap 4 framework - that means you have access to all the great features, css & js goodies has to offer. Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.
To learn more about Bootstrap's grid system, please refer to Bootstrap 4 Grid
CSS Structure - top
I'm using one main CSS file (assets/css/styles.css) and sass file available on (assets/sass/style.scss), in this template which you are free to modify depending on the customization you require. There are also other additional style sheets that I do not recommend changing. Those style sheets reside in the 'css' folder and 'sass' file on 'sass' folder.
- https://fonts.google.com/ - Web font Cabin from Google Fonts
- bootstrap.min.css - This is a main stylesheet that required for basic template styling like form, input, div, list element and etc.
- font-awesome.min.css - Web font containing all the icons from the Bootstrap framework and more.
- styles.css - The main stylesheet you are encouraged to modify.
The Styles CSS file contains all of the specific stylings for the page. The file is separated into sections using:
/* ------------------- Table of content -------------------------------- ---------------------- common content ----------------------- 1. body reset content 2. Nav 3. Modal 4. Modal search 5. Modal flag 6. Offset sidebar 7. Offset cart 8. Offset info bar 9. banner 10. why choose us 11. free quote 12. seo info 13. work progress 14. services 15. case studies 16. pricing 17. testimonial 18. blog thumb post 19. news letter thumd 20. contact form 21. footer 22. inner banner 23. funfact 24. we are hiring 25. cases 26. call to action 27. contact info 28. cse details about 29. project brief 30. case study step 31. faq 32. get support 33. blog sidebar 34. shop 35. single shop 36. product details 34. 404 35. blog post list 36. single blog 37. single service ---------------------- element content --------------------------- 1. element btn 2. element insta feed 3. element list 4. element newsletter 5. element pagination 6. element prelaoder 7. element section title 8. element social list 9. element video popup 10. element tab 11. element top bar 12. hover box (team) 13. element map 14. element input filed 15. step button 16. accordion 17. faq question 18. pulse animation 19. search filed 20. select 21. product filter 22. product ribbon 23. custom number 24. folating buttons 25. help tip 26. woocemmerce star rating 26. woo reviews 27. owl style 28. comment from 29. comment respond area 30. typography 31. drop caps 32. blockquote 33. author card 34. post navigation 35. chart 36. boostlisting element inheritance */
If you would like to edit a specific section of the site, simply find the appropriate label in the css or sass file, and then scroll down until you find the appropriate style that needs to be edited.
Color Styles (Variations) - top
This theme comes with Unlimited color variations. To change the color style from the theme edit the following lines:
... // primary and secondary color list $color-primary: #0c5adb; $color-secondary: #00138e; // tilte color $title-color: #181818;
Just change the color code name for example form $color-primary: #0c5adb; to #114898.
Available assets/sass/variable/_variable.scss directory
Brand / Logo - top
To change the logo edit the following lines:
......
The value is the header logo image path from the assets/images/logo.png
The value is the footer logo image path from the assets/images/footer-logo.png
Section heading - top
To add or change a team edit the following lines:
...Latest News
Our Latest Media
video section - top
To add or change video content edit the following lines:
...
you add your custom video just following instructions: got to https://www.youtube.com/ copy video url and paste it
Team - top
To add or change team content edit the following lines:
...
change team image and add your own image just following instructions: assets/images/team/team-1.jpg
Case grid element - top
To add or change a case grid content edit the following lines:
...Site Ranking
Marketing
add or remove svg icon just follow instructions : change image go to current folder path assets/images/cases-card/cases-card-1.png and change cases-card-2.png
Pricing plan table - top
To add or change a pricing table edit the following lines:
...Starter Plan
$49.99 /mo
- Increase traffic 130%
- Backlink analysis
- Organic traffic 215%
- 10 Free Optimization
- 24/7 support
Parallax image - top
To add or change parallax image open file eaxmple (filename.html)change image assets/images/doodle/doodle-1.png and must be add your parent data-scrollax-parent="true", find and edit code below:
......
Shop product - top
To add or change shop product content edit the following lines:
...
change portfolio and case image and add your own image just following instructions: assets/images/products/product-1.png
Pie chart element - top
To add or change a portfolio masonry edit the following lines:
Done
you just add pie chart or edit follow my instructions you add custom percent data-percent="85" to data-percent="55" and add custom color just go to (assets/js/main.js) and find 32. pie chart init and then add your custom color var barColors = ['#50e2c2', '#ffac42', '#9013fd']; example var barColors = ['#50e2c2', '#ffac42', '#9013fd', 'red'];
Contact - top
The Contact form is based on jQuery. You don't have to know PHP. To change sample email adress, open assets/php/c_config.php, find and edit code below:
...
define('YOUR_EMAIL_ADDRESS', 'info@example.com');
define('YOUR_EMAIL_SUBJECT', 'your mail subject');
define('YOUR_SUCCESS_MASSAGE', 'Successfully Sent Email');
Phone number - top
To add or change your custom number find and edit code below:
... +1 (254) 587-2548
you add your own number just follow it tel:+1%20(254)%20587-2548 you fill your space %20 and its working fine
Subscribe form - top
To add or change your custom number find and edit code below:
... if ($('.subscribe-form').length > 0) { $('.subscribe-form').ajaxChimp({ url: 'https://facebook.us8.list-manage.com/subscribe/post?u=85f515a08b87483d03fee7755&id=66389dc38b' }); }
you add your own number just follow this two link How to get a MailChimp form action URL
Obtain Your MailChimp Form Action URL
JavaScript - top
This theme imports the following Javascript files.
- assets/js/jquery-3.2.1.min.js
- assets/js/plugins.js
- assets/js/bootstrap.min.js
- assets/js/isotope.pkgd.min.js
- assets/js/jquery.magnific-popup.min.js
- assets/js/owl.carousel.min.js
- assets/js/jquery.ajaxchimp.min.js
- assets/js/scrollax.js
- https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyCy7becgYuLwns3uumNm6WdBYkBpLfy44k
- assets/js/main.js
PSD Files - top
The following Photoshop file are included with the download package place in /PSD/ folder:
Upturn.psd
Credits - top
Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this template. No guarantees, but I'll do my best to assist. If you have a more general question relating to the templates on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
XpeedStudio